<template class="">
  <el-drawer v-model="show" :with-header="false" direction="btt">
    <div>
      <div v-if="isAuthorized">
        <el-form size="small">
          <el-form-item>
            <el-radio-group v-model="radio">
              <el-radio :label="1">原文发布</el-radio>
              <el-radio :label="2">修改内容并发布</el-radio>
              <el-radio :label="-1">删除此内容</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="text"
              :rows="4"
              :disabled="radio != 2"
              type="textarea"
              placeholder="修改发表内容"
            />
          </el-form-item>
          <el-form-item>
            <el-tag class="mr-2 flex align-middle">
              <el-icon><i-ep-user /></el-icon>
              <span v-if="data.anonymous">匿名</span>
              <span v-else>{{ data.user.name }}</span>
            </el-tag>
            <el-tag class="mr-2 flex align-middle">{{ data.created }}</el-tag>
            <el-tag class="mr-2 flex align-middle">{{
              data.location[2] == null ? `IP:${data.ip}` : data.location.join('')
            }}</el-tag>
          </el-form-item>
          <el-form-item class="pt-4">
            <el-button :type="radio == -1 ? 'danger' : 'primary'" :disabled="!isTextPermitted">
              <span v-if="radio == -1" class="flex align-middle">
                <el-icon><i-ep-delete /></el-icon>
                <span>删除</span>
              </span>
              <span v-else class="flex align-middle">
                <el-icon><i-ep-message /></el-icon>
                <span>发布</span>
              </span>
            </el-button>
            <el-button :type="radio == -1 ? 'danger' : 'primary'" link>
              <span>取消</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="isLoggedIn">
        <span>Unauthorized</span>
      </div>
      <div v-else>
        <span>Unloggedin</span>
      </div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, computed } from 'vue'
import useViewStore from '@/stores/view.js'
import useUserStore from '@/stores/user.js'
import { ElNotification } from 'element-plus'

const userStore = useUserStore()
const viewStore = useViewStore()

const isAuthorized = computed(() => userStore.status > 0 && userStore.data.holeLevel > 0)
const isLoggedIn = computed(() => userStore.status > 0)

const data = ref(null)
const show = ref(false)
const text = ref('')
const radio = ref(1)

const isTextPermitted = computed(() => radio.value != 2 || text.value != data.value.text)

const open = (dataID) => {
  if (dataID >= 0) {
    if (isAuthorized) {
      show.value = true
      data.value = viewStore.data[dataID]
      text.value = viewStore.data[dataID].text
    } else if (isLoggedIn) {
      ElNotification({
        title: '此操作需要登录',
        type: 'warning'
      })
    } else {
      ElNotification({
        title: '您不能编辑此留言',
        type: 'warning'
      })
    }
  } else {
    ElNotification({
      title: '数据有误',
      type: 'error'
    })
  }
}

const operate = () => {
  const params = {
    code: data.value.code,
    text: text.value,
    status: radio.value,
    user: userStore.user
  }
  viewStore.operate(params).then(() => {})
}

defineExpose({ open })
</script>
